import React, { useEffect, useState } from 'react'
import { Form, Input, Button, Space, Card, Table, Tooltip } from 'antd'
import { SearchOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons'

import type { ColumnsType } from 'antd/es/table'

// 引入发送请求的函数
import { reqGetHospitalSet } from '@api/hospitalSet'

// 引入ts类型
import { IhospitalSetList } from '@api/hospitalSet/model/hospitalSetTypes'
interface DataType {
  key: string
  name: string
  age: number
  address: string
  tags: string[]
}

const columns: ColumnsType<DataType> = [
  // columns中的每一个对象控制了这一列展示什么内容
  {
    title: '序号', //决定了这个列的标题
    // dataIndex: 'age', //1. 当写了render函数之后,dataIndex的值决定了render函数的第一个参数是什么 2. 当不写render函数的之后,dataIndex就可以决定这一列渲染什么
    // key: 'name', // 数据中的键(id)
    render: (_, record, index) => {
      // render函数有三个参数:
      // _ 的值会变化,如果写dataIndex则有dataIndex决定,如果没有就是数据对象
      // record的值不会变化,就是数据对象
      // index的值不会变化,就是数据的下标
      return index + 1
    }, //render函数中返回什么则这一列就渲染什么
    align: 'center', //让这一列的内容水平居中
    width: 80, // 控制这一列的宽度
  },
  {
    title: '医院名称',
    // dataIndex: 'age',
    // key: 'age',
  },
  {
    title: '医院编号',
    // dataIndex: 'address',
    // key: 'address',
  },
  {
    title: 'api基础路径',
    // key: 'tags',
    // dataIndex: 'tags',
  },
  {
    title: '签名',
    // key: 'tags',
    // dataIndex: 'tags',
  },
  {
    title: '联系人姓名',
    // key: 'tags',
    // dataIndex: 'tags',
  },
  {
    title: '联系人手机号',
    // key: 'tags',
    // dataIndex: 'tags',
  },
  {
    title: '操作',
    render: () => {
      return (
        <Space>
          {/* Tooltip的作用: 鼠标放到Button上面,则展示提示文本. title就是提示的内容 */}
          <Tooltip title="修改医院">
            <Button icon={<EditOutlined />} type="primary"></Button>
          </Tooltip>
          <Tooltip title="删除医院">
            <Button icon={<DeleteOutlined />} type="primary" danger></Button>
          </Tooltip>
        </Space>
      )
    },
    fixed: 'right', //让这一列固定在右侧
    width: 100,
  },
]

const data: DataType[] = [
  {
    key: '1',
    name: 'John Brown',
    age: 32,
    address: 'New York No. 1 Lake Park',
    tags: ['nice', 'developer'],
  },
  {
    key: '2',
    name: 'Jim Green',
    age: 42,
    address: 'London No. 1 Lake Park',
    tags: ['loser'],
  },
  {
    key: '3',
    name: 'Joe Black',
    age: 32,
    address: 'Sidney No. 1 Lake Park',
    tags: ['cool', 'teacher'],
  },
]

export default function HospitalSet() {
  // 将表格数据存储到状态中
  // 注意: 如果使用useState.初始值是空数组,则状态的类型自动推论为never[].解决办法: 告诉Ts,list是IhospitalSetList这个类型
  const [list, setList] = useState<IhospitalSetList>([])
  // 注意: react中不建议把useEffect的挂载的回调定义成异步函数
  useEffect(() => {
    async function fetch() {
      const result = await reqGetHospitalSet(1, 2)
      // console.log(result)
      setList(result.records)
      //此时records下面有红色波浪线,是因为目前result自动推论的类型中没有records这个属性.解决办法:在定义请求函数的时候,将当前reqGetHospitalSet请求响应的数据类型通过泛型的形式传递给axios.则未来这里接收的result数据自动推论的类型就是我们接收到的数据的类型.红色波浪线就没有了
    }
    fetch()
  }, [])
  return (
    // Card组件提供白色背景颜色,提供内边距
    <Card>
      {/* layout 用来控制表单中表单元素的排列方式. inline所有表单元素在一行显示 */}
      <Form layout="inline">
        {/* antd中每一个表单元素,要求被Form.Item包裹 */}
        <Form.Item>
          <Input placeholder="医院名称"></Input>
        </Form.Item>
        <Form.Item>
          <Input placeholder="医院编码"></Input>
        </Form.Item>
        <Form.Item>
          {/* Space给组件之间添加间隔距离 */}
          <Space size={'small'}>
            {/* type="primary"就是主题颜色的按钮 */}
            <Button type="primary" icon={<SearchOutlined />}>
              查询
            </Button>
            <Button>清空</Button>
          </Space>
        </Form.Item>
      </Form>

      <Space className="gap">
        <Button type="primary">添加</Button>
        <Button type="primary" danger>
          批量删除
        </Button>
      </Space>
      {/* columns: 代表表格中有多少列. 值应该是一个数组
        dataSource: 代表表格中有多少数据(行), 值也是数组
        bordered 给表格添加边框
         rowSelection 展示复选框
        scroll={{x:1500}} 控制是否展示滚动条. x表示水平方向滚动. 1500代表滚动区域是1500px
      */}
      <Table
        columns={columns}
        dataSource={data}
        className="gap"
        bordered
        rowSelection={{}}
        scroll={{ x: 1500 }}
      />
    </Card>
  )
}
